localStorage와 sessionStorage

Web Storage

HTML5에 포함된 클라이언트에 저장되는 새로운 storage이다.
키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회한다.

localStroage와 sessionStroage 두가지 방식을 제공한다. 두가지 방식은 데이터 지속성에서 크게 차이가 난다.

쿠키와의 차이점

  1. 저장용량
    • cookie는 대략 4KB 크기만 저장할 수 있고, 20개 정도로 제한되기도 한다.
    • Web stroage는 최소 2MB 이상의 데이터를 저장할 수 있다.
  2. 요청에 포함여부
    • cookie : 요청마다 모든 쿠키가 포함된다.
    • web storage : 선택적으로 포함할 수 있으며, 가공할 수 있다.
  3. 유효기간
    • cookie : 개발자가 만료일을 지정할 수 있다. 지정하지 않을 시 세션 쿠키가 된다.
    • web storage : 유효기간을 설정할 수 없다. localStorage 는 삭제하지 않을 시 데이터가 영구적으로 저장된다. sessionStorage 는 session 에서만 유지된다.(탭 닫히면 소멸)
cookie와 web storage에서의 session

cookie에서는 같은 브라우저(다른 탭, 다른 창이여도)면 같은 세션으로 정의하고 web Storage에서는 탭마다 다른 세션으로 정의한다.
즉, 세션 쿠키는 브라우저가 모두 종료되어야 소멸되고, sessionStorage는 탭이 종료되면 소멸된다.

localStorage/sessionStorage

도메인마다 별도의 로컬 스토리지로 관리된다.
동기적으로 작동한다.
두 storage의 생명주기를 제외한 동작 및 작동방식은 유사하다.

데이터 저장하기

키와 값의 쌍으로 데이터를 저장한다.

localStorage.setItem('user', 'John Doe');
localStorage.user = "John Doe"

데이터 읽기

키에 대한 값을 반환한다.

localStorage.getItem('user');
localStorage.user;

localStorage.getItem(); // 인자를 없으면 전체를 받아온다.

데이터 삭제하기

localStorage.removeItem('user');

localStorage.clear(); //모든 데이터 삭제

데이터 순회

localStorage 객체는 iterable 객체가 아니다. 하지만 length 프로퍼티를 가지고 index로도 접근이 가능하다. 유사배열 객체라고도 할 수 있을 것 같다.

localStrorage.length // length 프로퍼티를 가진다.

let keys = Object.keys(localStorage);
for(let key of keys) {
  alert(`${key}: ${localStorage.getItem(key)}`);
}

Storage Event

Storage 이벤트는 web storage에 변화가 있을 때 발생한다.
Storage 이벤트는 변경 사항을 만든 페이지를 제외한 동일한 출처의 다른 페이지에선만 감지된다.
즉, localStorage 또는 sessionStorage 를 변경할 경우, 같은 도메인에서 열린 다른 탬이나 윈도우에서 Storage 이벤트가 발생한다.

storage event property

이벤트 등록

window 객체에 이벤트를 등록할 수 있다.

window.addEventListener('storage', () => {
  console.log(JSON.parse(window.localStorage.getItem('sampleList')));
});

window.onstorage = () => {
  console.log(JSON.parse(window.localStorage.getItem('sampleList')));
};

예시

window.addEventListener('storage', function(event) {
    if (event.storageArea === localStorage) {
        console.log('Storage key updated:', event.key);
        console.log('Old value:', event.oldValue);
        console.log('New value:', event.newValue);
        console.log('Change originated from:', event.url);
    }
});

어떻게 사용될 수 있을 까?

여러 탭이나 윈도우 간의 데이터 동기화를 구현할 때 유용하다.
사용자가 한 탭에서 설정을 변경하면 다른 탭에서도 이 변경사항을 바로 반영할 수가 있다.

reference